import Taro, {Component, Config} from '@tarojs/taro'
import {View, Button, Text, ScrollView, SwiperItem, Image, ScrollView, Block, RichText} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, subtime} from '../../utils/common'


import FooterInfo from '../../components/FooterInfo'

import './upgrade.less'

import {companyName, servicePhoneNumber} from "../../utils/common";

interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Upgrade extends Component<IHomeProps> {
  state = {
    navs: [
      {id: 2, title: '会员'},
      {id: 3, title: 'VIP会员'},
      {id: 4, title: '合伙人'},
    ],
    currentNavId: 3,
    currentNavIdIndex: 0,
    userInfo: {},
    vipLevel: 0,
    items: [],
    block: ''
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '代理升级'})
    let userInfo = getRuntime().getUserInfo()
    if (!userInfo) {
      getRuntime().navigateTo('/pages/other/bindPhone');
      return
    }
    this.setState({
      userInfo,
      vipLevel: userInfo.vipLevel,
      // currentNavId: userInfo.vipLevel !== 0 ? userInfo.vipLevel : 1
    })
    this.getAllPrivilegeTypes()
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({title: '代理升级'})
    this.getUserInfoFromHost()
  }

  getAllPrivilegeTypes() {
    let {homeStore} = this.props.stores
    homeStore.getAllPrivilegeTypes({
      callback: res => {
        let navs = []
        if (res.items) {
          res.items.reverse()
          navs = res.items
        }
        this.setState({
          items: res.items,
          navs
        })
      }
    })
  }

  setCurrentNavId(level: number, index: number) {
    this.setState({
      currentNavId: level || 0,
      currentNavIdIndex: index || 0,
    })
  }

  makePone() {
    getRuntime().makePhoneCall(servicePhoneNumber)
  }

  getUserInfoFromHost() {
    let { userStore } = this.props.stores
    let temp = this.state.userInfo
    userStore.getUserInfo({
      callback: res => {
        // getRuntime().setStorage('user', res) // 此处返回的信息未带token
        res.token = temp.token
        getRuntime().setUserInfo(res)
        this.setState({
          userInfo: res,
        })
      }
    })
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  submit() {
    let {userStore} = this.props.stores
    let {currentNavId, items, currentNavIdIndex} = this.state
    userStore.buyPrivilege({
      id: items[currentNavIdIndex]['id'],
      payType: 6,
      callback: res => {
        if (!res.payParams) {
          getRuntime().showToast('系统支付错误，请联系客服解决~');
          return false;
        }
        getRuntime().wxPay(JSON.parse(res.payParams), () => {
          // 更新用户信息
          getRuntime().showToast('恭喜您,您已升级成为合伙人~')
        })
        this.getUserInfoFromHost()
      }
    })
    this.setState({ block: '刷新页面' })
  }

  render() {
    let {navs, currentNavId, vipLevel, items, currentNavIdIndex, userInfo} = this.state
    let info = items[currentNavIdIndex]
    let calssName = 'upgrade__header vip'
    let bg = require('../../assets/img/bg_01.png')
    switch (currentNavId) {
      case 1: {
        calssName = `upgrade__header vip`;
        bg = require('../../assets/img/bg_02.png')
        break
      }
      case 2: {
        calssName = `upgrade__header vip agent`;
        bg = require('../../assets/img/bg_03.png')
        break
      }
      default: {
        calssName = `upgrade__header`;
        bg = require('../../assets/img/bg_01.png')
      }
    }
    return (
      <View className='upgrade '>
        <ScrollView className='scroll-column' scrollX scrollWithAnimation>
          {
            navs.map((item, index) => {
              return (
                <View
                  className={currentNavId === item.level ? 'scroll-column__title scroll-column__active' : 'scroll-column__title'}
                  style={{width: '33.33%'}}
                  onClick={this.setCurrentNavId.bind(this, item.level, index)}
                >{item.privilegeName}</View>
              )
            })
          }
        </ScrollView>
        {items.length > 0 &&
        <View>
          {
            // 合伙人
            currentNavId === 3 &&
            <View>
               <View className={calssName}>
                  <Image className='upgrade__img' src={bg} />
                  <View className='upgrade__box'>
                     <View className='upgrade__title'>{companyName} {info && info.privilegeName}</View>
                     <View className='upgrade__con'>
                        <View className='upgrade__l'>
                           <View>
                              <Text className='small'>￥</Text>
                              <Text className='price'>{info['buyPrice']}</Text>
                           </View>
                           <View className='old-price'>原价 <Text
                               className='p'>￥{info && info['originPrice']}</Text></View>
                        </View>
                        <View className='upgrade__r'>
                          {
                            vipLevel === currentNavId &&
                            <View className='buy-ed'>
                               <Text className='p'>{'您已是'+info.privilegeName}</Text>
                               <Text className='a'>{subtime(userInfo.buyVipTime)}</Text>
                            </View>
                          }
                          {
                            vipLevel !== currentNavId &&
                            <View className='buy' onClick={this.submit.bind(this)}>立即购买</View>
                          }
                        </View>
                     </View>
                  </View>
               </View>

               <View className='title  '>—— 特权介绍 ——</View>

               <View className='phone-wrap'>
                  <View className='phone' onClick={this.makePone.bind(this)}>咨询热线：{servicePhoneNumber}</View>
               </View>

               <View className='desc content-30 rich-text'>
                  <RichText nodes={info.introduce} />
               </View>
            </View>
          }
          {
            // VIP 会员
            currentNavId === 2 &&
            <View>
               <View className={calssName}>
                  <Image className='upgrade__img' src={bg}/>
                  <View className='upgrade__box'>
                     <View className='upgrade__title'>{companyName} {info.privilegeName}</View>
                     <View className='upgrade__con'>
                        <View className='upgrade__l'>
                           直推一位用户成为VIP会员
                        </View>
                        <View className='upgrade__r'>
                          {
                            vipLevel > currentNavId &&
                            <View className='buy-ed'>
                               <Text className='p'>{'您已是合伙人'}</Text>
                               <Text className='a'>{subtime(userInfo.buyVipTime)}</Text>
                            </View>
                          }
                          {
                            vipLevel === currentNavId &&
                            <View className='buy-ed'>
                               <Text className='p'>{'您已是'+info.privilegeName}</Text>
                               <Text className='a'>{subtime(userInfo.buyVipTime)}</Text>
                            </View>
                          }
                          {
                            vipLevel < currentNavId &&
                            <View className='buy' onClick={this.link.bind(this, '/pages/share/index')}>立即邀请</View>
                          }
                        </View>
                     </View>
                  </View>
               </View>
               <View className='title title-def'>—— 特权介绍 ——</View>

               <View className='phone-wrap'>
                  <View className='phone phone-def' onClick={this.makePone.bind(this)}>咨询热线：{servicePhoneNumber}</View>
               </View>

               <View className='desc content-30 rich-text'>
                  <RichText nodes={info.introduce} />
               </View>
            </View>
          }
          {
            // 会员
            currentNavId === 1 &&
            <View>
               <View className={calssName} style={{height: '70px'}}>
                  <Image className='upgrade__img' src={bg}/>
                  <View className='upgrade__box'>
                     <View className='upgrade__title'>{companyName} {info.privilegeName}</View>
                     <View className='upgrade__con'>
                       {/* <View className='upgrade__r'>
                          {
                            vipLevel === currentNavId &&
                            <View className='buy-ed'>
                               <Text className='p'>{info.privilegeName}</Text>
                               <Text className='a'>{subtime(userInfo.buyVipTime)}</Text>
                            </View>
                          }
                          {
                            vipLevel !== currentNavId &&
                            <View className='buy' onClick={this.submit.bind(this)}>立即购买</View>
                          }
                        </View>*/}
                     </View>
                  </View>
               </View>
               <View className='title title-def'>—— 特权介绍 ——</View>

               <View className='phone-wrap'>
                  <View className='phone phone-def' onClick={this.makePone.bind(this)}>咨询热线：{servicePhoneNumber}</View>
               </View>

               <View className='desc content-30 rich-text'>
                  <RichText nodes={info.introduce} />
               </View>
            </View>
          }
        </View>
        }
      </View>
    )
  }
}

export default Upgrade
